<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"               
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns="http://www.w3.org/1999/xhtml">
    <h:form id="frmListEvent"  >

        <p:dataTable value="#{eventControl.allActiveEvents}" var="event"  paginator="true" rows="10" widgetVar="dataTable" 
                     emptyMessage="No event found."
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                     rowsPerPageTemplate="5,10,15">
            <f:facet name="header">  
                Events List
            </f:facet>  
            <p:column>  
                <f:facet name="header">  
                    <h:outputText value="Pic" />  
                </f:facet>  
                <h:commandLink actionListener="#{eventControl.redirectToEvent(eventControl.selectedevent)}"  ><img src="#{event.photo}" height="100" width="70" />

                    <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                </h:commandLink>
            </p:column>  
            <p:column filterBy="#{event.title}" filterMatchMode="contains" >  
                <f:facet name="header">  
                    <h:outputText value="Title" />  
                </f:facet>  
                <h:commandLink value="#{event.title}" actionListener="#{eventControl.redirectToEvent(eventControl.selectedevent)}" style="color: blue; text-decoration: none" >

                                        <f:setPropertyActionListener value="#{event}" target="#{eventControl.selectedevent}" />
                                    </h:commandLink> 
            </p:column>  
            <p:column filterBy="#{event.description}" filterMatchMode="contains"  >  
                <f:facet name="header">  
                    <h:outputText value="Content" />  
                </f:facet>  
                <h:outputText value="#{event.description}"> </h:outputText>  
            </p:column>  
            <p:column>  
                <f:facet name="header">  
                    <h:outputText value="Information" />  
                </f:facet>  
                <h:panelGrid  columns="2" title="#{event.title}" style="border: none" >

                    <h:outputLabel value="Start at:" class="color_blue"></h:outputLabel>
                    <h:outputLabel value="#{event.startDate}"  class="bold"  >
                        <f:convertDateTime timeZone="GMT+7" type="date" pattern="MM/dd/yyyy" />
                    </h:outputLabel>
                    <h:outputLabel value="End at:" class="color_blue" ></h:outputLabel>
                    <h:outputLabel value="#{event.endDate}" >
                        <f:convertDateTime timeZone="GMT+7" pattern="MM/dd/yyyy"  />
                    </h:outputLabel>
                    <h:outputLabel value="Register at:" class="color_blue_red"></h:outputLabel>
                    <h:outputLabel value="#{event.startRegDate}"  class="bold"  >
                        <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                    </h:outputLabel>
                    <h:outputLabel value="Due to:" class="color_blue_red"></h:outputLabel>
                    <h:outputLabel value="#{event.endRegDate}"  class="bold"  >
                        <f:convertDateTime pattern="MM/dd/yyyy" timeZone="GMT+7" />
                    </h:outputLabel>
                </h:panelGrid>
            </p:column>  


        </p:dataTable>
    </h:form>
</ui:composition>